<template>
<div>

<el-row class="mt10">

	<el-form :inline="true" :model="form" >

		<el-form-item >
		    <el-input v-model="form.login_name" placeholder="用户名"
		    style="width:292px;height:40px;"
		    ></el-input>
		</el-form-item>

	    <el-form-item >
		    <el-input v-model="form.name" placeholder="姓名"
		    style="width:292px;height:40px;"
		    ></el-input>
		</el-form-item>

		<!-- <el-form-item >
		    <el-input v-model="form.login_flag" placeholder="状态"></el-input>
		</el-form-item> -->

		<el-form-item>
		    <el-button type="primary" @click="search"
		    style="width:144px;height:40px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1);"
		    >查询</el-button>
		</el-form-item>

		<el-form-item>
		    <el-button type="success" @click="addUser"
		    style="width:144px;height:40px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
		    >添加人员</el-button>
		</el-form-item>

	</el-form>
	</el-row>

	<el-row class="bbg3">

	<el-table
	    :data="subUserList.results"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#fff',    
		}"
	    border
	    height="620"
	    :row-style="{
	    	height : '57px'
	    }"
	    style="width:100%">
	    <el-table-column
	      prop="login_name"
	      align="center"
	      label="用户名"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="company_name"
	      align="center"
	      label="所属网格"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="name"
	      align="center"
	      label="姓名"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="rolenames"
	      align="center"
	      label="角色"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="create_time"
	      align="center"
	      label="创建时间"
	      >
	    </el-table-column>
	    <el-table-column
	      align="center"
	      label="操作">
	      	<template v-if="scope.row.id" slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>

	</el-row>


	<el-row class="text-center mt20">
	<el-pagination
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	  :current-page="pageNo"
	  :page-size="pageSize"
	  layout="total, sizes, prev, pager, next"
	  :total="subUserList.totalRecord">
	</el-pagination>
</el-row>


<el-dialog title="人员" width="530px" :visible.sync="userDialogFormVisible">
  	<el-form ref="userForm" :rules="rules" :model="userForm"
		label-width="70px"	
		>
		
		<el-form-item v-if="userForm.id == undefined" label="账号:" prop="login_name" >
			<el-input  v-model="userForm.login_name" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item v-else label="账号:">
			<span style="color:#fff;">{{userForm.login_name}}</span>
		</el-form-item>

		
		<!-- <el-form-item label="密码:" >
			<el-input v-model="userForm.password"></el-input>
		</el-form-item> -->
		<el-form-item label="姓名:" prop="name">
			<el-input v-model="userForm.name" style="width:400px;"></el-input>
		</el-form-item>
		<el-form-item label="电话:" prop="mobile">
			<el-input v-model="userForm.mobile" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="角色:" prop="rolelist">
			<!-- <el-checkbox 
			v-for="(item, index) in roleList" 
			v-if="!(!zhixingbumen && item.role_id == 'clbm')"
			v-model="checked5" :key="index" :label="item.role_id" border size="medium">
			{{item.role_name}}
			</el-checkbox> -->

			<el-radio-group v-model="userForm.rolelist" >

				<template v-if="obj.type == '1'">
					<el-radio
					 v-for="(item, index) in roleList" 
					 v-if="item.role_id != 'xjwgz' && item.role_id != 'zjwgz'"
					 :key="index" :label="item.role_id">{{item.role_name}}</el-radio>
				</template>

				<template v-if="obj.type == '2'">
					<el-radio
					 v-for="(item, index) in roleList" 
					 v-if="item.role_id != 'xjwgz' && item.role_id != 'zjwgz'"
					 :key="index" :label="item.role_id">{{item.role_name}}</el-radio>
				</template>

				<template v-if="obj.type == '3'">
					<el-radio
					 v-for="(item, index) in roleList" 
					 v-if="item.role_id != 'zjwgz' && item.role_id != 'sjwgz'"
					 :key="index" :label="item.role_id">{{item.role_name}}</el-radio>
				</template>

				<template v-if="obj.type == '4'">
					<el-radio
					 v-for="(item, index) in roleList" 
					 v-if="item.role_id != 'sjwgz' && item.role_id != 'xjwgz'"
					 :key="index" :label="item.role_id">{{item.role_name}}</el-radio>
				</template>
				
			</el-radio-group>

		</el-form-item>

		<el-form-item >
			<el-row style="width:400px;">
			  <el-col :span="12">
			  	<el-button type="primary" @click="createUser"
			  	style="width:100px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
			  	>
					保 存
				</el-button>
			  	
			  </el-col>
			  <el-col :span="12" class="text-right">
			  	<el-button @click="userDialogFormVisible = false"
			  	style="width:100px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1); color:#fff;"
			  	>取 消</el-button>
			  </el-col>
			</el-row>
		</el-form-item>


	</el-form>


	

  <!-- <div slot="footer" class="dialog-footer">
    <el-button @click="userDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="createUser">确 定</el-button>
  </div> -->
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'user',
	
	data () {
		return {
		  	pageNo : 1,
			pageSize : 10,

			gridid : this.obj.id,

			parentGrid : this.obj,

			form : {},
			subUserList : {},

			userDialogFormVisible : false,

			userForm : {},

			roleList : [],

			checked5 : '',

			what : '',

			zhixingbumen : true,

			rules: {
				login_name: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
				],
				rolelist: [
					{ required: true, message: '请选择角色', trigger: 'change' }
				],
				mobile : [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur'},
				]
			},
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},

		init () {
			this.$http({
				fun : 'subUserList',
				grid_id : this.gridid,
				login_name : this.form.login_name,
				name : this.form.name,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('subUserList');
					console.log(res);
					//this.subUserList = res;
					this.subUserList = this.$util.tableAdd(res);
				}
			});


			// this.$http({
			// 	fun : 'subMemberInfo',
			// 	grid_id : this.gridid,
			// 	cb : res => {
			// 		console.log('subMemberInfo');
			// 		console.log(res);
			// 		this.zhixingbumen = true;
			// 	},
			// 	err : res => {
			// 		console.log('subMemberInfo err' );
			// 		console.log(res);
			// 		this.zhixingbumen = false;
			// 	}
			// });
		},

		addUser () {
			this.what = 'add';
			this.userForm = {};
			this.checked5 = '';
			this.userDialogFormVisible = true;
		},

		createUser () {

			console.log('createUser');

			this.$refs['userForm'].validate((valid) => {
	          if (valid) {
	            let para = {
					fun : 'createUser',
					login_name : this.userForm.login_name,
					password : '000000',
					mobile : this.userForm.mobile,
					name : this.userForm.name,
					rolelist : this.userForm.rolelist,
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.userDialogFormVisible = false;
						this.init();
					}
				};

				if(this.what == 'add'){
					para['grid_id'] = this.gridid;
					// para['parent_ids'] = this.currentGrid.parent_ids;
					// para['type'] = this.currentGrid.type;
				}else if(this.what == 'edit'){
					para['id'] = this.userForm.id;
				}

				this.$http(para);
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
		},

		edit (item) {

			console.log(item);
			this.what = 'edit';
			this.userForm = Object.assign({}, item);
			this.userDialogFormVisible = true;

			this.checked5 = item.roleids;
		},

		del (item) {
			console.log(item);

			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
					fun : 'deleteUser',
					id : item.id,
					//del_flag : 1,
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.init();
					},
					err : res => {
						this.$message.error('操作失败');
					}
				});
	          
	        }).catch(() => {
	                   
	        });
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();

		this.$http({
			fun : 'roleList',
			cb : res => {
				console.log('rolelist');
				console.log(res);
				this.roleList = res;
			}
		});
	},

}
</script>

<style scoped>

</style>
